<template>
    <div class="movie">
        <div class="movie-top">
            <div class="top-l">
                <router-link to="/" tag="span">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou">

                        </use>
                    </svg>
                </router-link>
                <p>
                    电影演出
                </p>
            </div>
            <div class="top-r">
                <input type="text" >
            </div>
            
        </div>
        
        <div class="movie-nav">
            <div class="slideshow">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in image" :key="item.id">
                            <img :src="require(`../../assets/images/${item.url}`)" />
                        </div>
                    </div>
                    <!-- <div class="swiper-pagination"></div> -->
                </div>
            </div>
            <div class="nav-list">
                <router-link to="/movie/movietheatre" tag="div" class="list">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-kandianying"></use>
                        </svg>
                    </span>
                    <p>
                        电影/影院
                    </p>
                </router-link>
                <router-link to="/movie/movietheatre" tag="div" class="list">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yinle"></use>
                        </svg>
                    </span>
                    <p>
                        演出/玩乐
                    </p>
                </router-link>
                <router-link to="/movie/movietheatre" tag="div" class="list">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shipinbofangqi"></use>
                        </svg>
                    </span>
                    <p>
                        放映厅
                    </p>
                </router-link>
                <router-link to="/movie/movietheatre" tag="div" class="list">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-ico_tuokouxiu"></use>
                        </svg>
                    </span>
                    <p>
                        脱口秀
                    </p>
                </router-link>
                <router-link to="/movie/movietheatre" tag="div" class="list">
                    <span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-vip"></use>
                        </svg>
                    </span>
                    <p>
                        省钱月卡
                    </p>
                </router-link>
            </div>

            <div class="btn-list">
                <div class="item">
                    <p class="item-title">实时票房</p>
                    <span class="item-con">
                        秒级更新
                    </span>
                </div>
                <div class="item">
                    <p class="item-title">口碑推荐</p>
                    <span class="item-con">
                        精选演出
                    </span>
                </div>
                <div class="item">
                    <p class="item-title">影展周边</p>
                    <span class="item-con">
                        限时9.9元
                    </span>
                </div>
                <div class="item">
                    <p class="item-title">买一赠一</p>
                    <span class="item-con">
                        扫黑行动
                    </span>
                </div>
            </div>
            <!-- <router-view></router-view> -->
            <good-movie></good-movie>
            <movie-list></movie-list>
            
        </div>
        
        <!-- <h1>这是另一个页面</h1> -->
    </div>
</template>

<script>
import '@/assets/iconfont/iconfont.js'
import Swiper from 'swiper'
import "swiper/css/swiper.css"
import goodMovie from '@/components/movie/goodMovie.vue';
import movieList from '@/components/movie/movieList.vue';
import {getAllPro} from '@/api/request'
export default {
    data() {
        return {
            image:[]
        }
    },
    created(){
        getAllPro("/db").then(res=>{
            let {img} = res.data
            this.image = img
        })

    },
    watch:{
        image(){
            this.$nextTick(()=>{
                
                var mySwiper = new Swiper ('.swiper-container', {
                    autoplay:{
                        delay:2000,
                        stopOnLastSlide:false,
                        disableOnInteraction:true
                    },
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                
                })  
            })
            
        }
    },

    components: {
        goodMovie,
        movieList
    },
}
</script>

<style lang="scss" scoped>

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    .movie{
        background-color: #ed393d;
        overflow: hidden;

        .movie-top{
            color: #eeffe5;
            margin-top: .1rem;
            padding: .2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 0.84rem;

            .top-l{
                display: flex;
                justify-content: space-evenly;
                flex:1;
                font-size: .4rem;
                margin-right: .1rem;
            }
            
            .top-r{
                input{
                    border-radius: .22rem;
                    border: none;
                    width: 5.53rem;
                    height: .6rem;
                    &:focus{
                        outline: none;
                    }
                }
            }
        }
        .movie-nav{
            border-radius: .5rem  .5rem 0 0 ;
            background-color: #fff;
            overflow: hidden;
            .slideshow{
                margin: .3rem auto;
                width: 7.7rem;
                height: 1.81rem;
                border-radius: .2rem;
                
                img{
                    border-radius: .2rem;
                    width: 7.7rem;
                    height: 1.81rem;
                }
            }

            .nav-list{
                margin: 0 .2rem;
                display: flex;
                justify-content: space-between;
                margin-bottom: .3rem;
                .list{
                    height: 1.16rem;
                    cursor: pointer;
                    display: flex;
                    // font-size: .3rem;
                    flex-flow: column nowrap;
                    justify-content: space-evenly;
                    align-items: center;
                    span{
                        font-size: .55rem;
                    }
                }
            }

            .btn-list{
                display: flex;
                margin-bottom: .36rem;
                margin: 0 .2rem;
                .item{
                    padding-left: .1rem;
                    width: 1.8rem;
                    height: 1.1rem;
                    box-sizing: border-box;
                    margin-left: .14rem;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: space-evenly;
                    align-items: flex-start;
                    border: 1px solid #e9e9e9;
                    box-sizing: border-box;
                    p{
                        font-weight: 800;
                        font-size: .28rem;
                    }
                    span{
                        font-size: .20rem;
                        color: #5f5f5f;
                    }
                }
            }
            
        }
    }
</style>